<template>
	<view class="detail" v-if="basicInfo.imageList">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item,index) in basicInfo.imageList" :key="index">
				<view class="swiper-item">
					<image :src="item" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="info">
			<view class="h1">{{basicInfo.productName}}</view>
			<view class="price"><text class="small">￥</text><text>{{basicInfo.price/100}}</text></view>
			<view class="tips">
				<text>{{basicInfo.tips}}</text>
			</view>
		</view>
		<rich-text :nodes="basicInfo.productDescription"></rich-text>
		<view class="footer">
			<view class="btns">
				<div class="btn">
					<image src="../../../static/images/service.jpg"></image>
					<text>客服</text>
				</div>
				<navigator open-type="switchTab" url="../../../pages/cart/cart" class="btn">
					<uni-badge :text="productAmount" class="badge" absolute="rightTop">
					</uni-badge>
					<image src="../../../static/images/cart.jpg"></image>
					<text>购物车</text>
				</navigator>
			</view>
			<button type="default" @click="addToCart">加入购物车</button>
			<button type="primary">立即购买</button>
		</view>


	</view>
</template>

<script setup>
	// 导入接口
	import {
		getBasicInfo, // 详情
		GetCartTotal, // 获取购物车商品数量
		checkLogin,
		addCart, // 检查登录
		// addCart, //添加购物车	
	} from '../../../api/auth.js'
	// 导入onload生命周期
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	// 定义skuId
	const skuId = ref('');
	// 定义用户是否登录
	const isLog = ref(false);
	checkLogin()
		.then(res => {
			if (res.ret) {
				isLog.value = true
			}
		})
	// 定义购物车数量
	const productAmount = ref('');

	function getAmount() {
		GetCartTotal()
			.then(res => {
				productAmount.value = res.data.productAmount;
			})
	}
	getAmount()

	// 基本信息
	const basicInfo = ref({})
	onLoad(({
		id
	}) => {
		skuId.value = id
		getBasicInfo({
				skuId: id
			})
			.then(res => {
				var str = res.data.productDescription;
				// 让图片宽为100%，使用正则替换
				str = str.replace(/<img/g, '<img style="width:100%" ')
				// 更新
				res.data.productDescription = str;
				// 更新基本信息
				basicInfo.value = res.data;
			})
	})

	// 加入购物车
	function addToCart() {
		if (isLog.value) {
			addCart({
					"buyNumber": 1,
					"skuId": skuId.value,
					"is_tc": false
				})
				.then(res => {
					if (res.ret) {
						uni.showToast({
							title: "添加购物车成功"
						})
					} else {
						uni.showToast({
							title: "添加失败",
							icon: 'error'
						})
					}
				})
		} else [
			uni.showModal({
				title: "登录提示",
				content: "您尚未登录，是否立即登录?",
				confirmText: "登录",
				success: function(res) {
					if (res.confirm) {
						var callback = "/home/pages/detail/detail?id=" + skuId.value;
						uni.navigateTo({
							url: "/pages/smsLogin/smsLogin?callback=" + decodeURIComponent(callback)
						})
					}
				},
				fail: function() {
					console.log("fail")
				}
			})
		]
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		align-items: center;
		display: flex;
		background-color: #fff;
		right: 0;
		height: 120rpx;
		padding: 0 15rpx;

		.btns,
		button {
			flex: 1;
			margin: 0 10rpx;
		}

		.btns {
			display: flex;

			.btn {
				display: flex;
				flex: 1;
				text-align: center;
				flex-direction: column;
				font-size: 18rpx;
				align-items: center;
				position: relative;

				.badge {
					position: absolute;
					top: 5px;
					right: 10px;
				}
			}
		}

		.btns image {
			width: 50rpx;
			height: 50rpx;
			display: inline;
		}
	}

	.detail {
		padding-bottom: 120rpx;
	}

	swiper {
		height: 750rpx;
	}

	.swiper-item {
		image {
			width: 750rpx;
			height: 750rpx
		}
	}

	.info {
		padding: 30rpx;
	}

	.tips {
		font-size: 24rpx;
	}

	.small {
		font-size: 18rpx;
	}

	.price {
		margin-bottom: 30rpx;
		margin-top: -20rpx;
	}
</style>